<template>
  <section>
    <div class="section-header">
      <div>
      合同付款信息
      <div class="tip" v-if="progress.payInfoList.length">
        <div><span class="iconfont icon-wancheng"></span>已付款</div>
        <div><span class="round round-current"></span>当前节点</div>
        <div><span class="round"></span>未付款</div>
      </div>
      </div>
    </div>
    <a-empty v-if="!progress.payInfoList.length" />
    <div v-else class="section-content section-pay">
      <div class="se-title">
        <!-- <p>计划时间：</p> -->
        <p>付款时间：</p>
        <p>付款进度：</p>
      </div>
      <div class="section-progress" :class="{ 'one-progress': progress.payInfoList.length == 1, 'auto-width-progress': progress.payInfoList.length <= 10 }">        
        <div class="line" v-for="item of payInfoList" :key="item.id">
          <template v-for="obj of item.records">
            <div class="icon" :key="obj.id">
              <p class="plantime" :class="{'hidden-p': !obj.complateTime}">
                <span :title="obj.complateTime?formatDate(obj.complateTime,'yyyy-MM-dd'):''">{{obj.complateTime?formatDate(obj.complateTime,"yyyy-MM-dd"):""}}</span>
              </p>
              <p class="iconground">
                <span v-if="obj.isDeliver == '0'" class="iconfont icon-wancheng"></span>
                <span v-else-if="obj.isDeliver == '1'" class="iconfont icon-wancheng icon-delay"></span>
                <span v-else-if="obj.isDeliver == '2'" class="round round-current"></span>
                <span v-else class="round"></span>
              </p>
              <p class="proname" :title="obj.moneyName">{{ obj.moneyName }}</p>
            </div>
          </template>
        </div>
      </div>
    </div>
  </section>
</template>

<script>

import { getAction, postAction } from '@/api/manage'
import { formatDate } from '@/utils/util'
export default {
  props: {
    contractId: {
      type: String,
      default: '0',
    },
  },
  data() {
    return {
      payInfoList: [],
      progress: { payInfoList: [] },
      urls: {
        loadContractInstallments: '/hte/contract/loadContractInstallments',
      },
    }
  },
  mounted() {
  },
  methods: {
    formatDate,
    /**
     * 计算进度
     */
    getProcessData(list, targe) {
      this.progress[targe] = list
      this[targe] = []
      const totalPage = Math.ceil(list.length / 10)
      for (let j = 0; j < totalPage; j++) {
        const start = j * 10
        const end = start + 10
        const pageNowData = list.slice(start, end)
        this[targe].push({
          records: pageNowData,
        })
      }
    },
    fetchTaskPayInfo() {
      if(this.contractId && this.contractId!="null"){
        getAction(this.urls.loadContractInstallments + '/' + this.contractId, {}).then((res) => {
          if (res.success) {
            this.getProcessData(res.result, 'payInfoList')
          }
        })
      }
    },
  },
  watch: {
    contractId(newV, oldV) {
      if(newV && newV!="0"){}
      this.fetchTaskPayInfo()
    },
  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/hte-main.less';
.page-main {
  .container {
    .content {
      margin-top: 20px;
      section {
        margin-bottom: 18px;
        .iconfont {
          font-size: 20px;
          color: #12adf1;
          position: relative;
          background-color: #fff;
          &.icon-delay {
            color: #f59a23;
          }
        }
        .round {
          width: 20px;
          height: 20px;
          border-radius: 100%;
          background-color: #aeaeae;
          display: inline-block;
          vertical-align: text-bottom;
          margin-top: 5px;
          position: relative;
          z-index: 1;
        }
        .round-current {
          background-color: #18c55d;
          &:after {
            content: '';
            display: inline-block;
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 100%;
            background-color: #fff;
            top: 5px;
            left: 5px;
          }
        }
        .section-header {          
          .tip {
            background-color: #f2f2f2;
            border-radius: 8px;
            display: inline-block;
            padding: 7px 14px;
            margin-left: 32px;
            > div {
              display: inline-block;
              font-weight: normal;
              font-size: 14px;
              margin: 0 11px;
              span {
                margin: 0 2px;
              }
            }
          }
          .iconfont {
            background-color: inherit;
            top: 2px;
          }
        }
        .section-table {
          .mr10 {
            margin-right: 10px;
          }
        }
        .section-content {
          margin: 25px 0 20px 64px;
          display: flex;
          .se-title {
            flex: 0 0 81px;
            color: #333;
            position: relative;
            top: 3px;
            left: 0;
            > p {
              margin-bottom: 23px;
            }
            &.report {
              > p:nth-child(2) {
                padding-top: -3px;
              }
              > p:nth-child(3) {
                padding-top: 7px;
              }
            }
          }
          .section-progress {
            width: calc(100% - 81px);
            .line {
              display: flex;
              position: relative;
              padding-bottom: 3px;
              justify-content: flex-start;
              p{margin-bottom: 0;
                &.paydone>span, &.plantime>span{
                  width: 93%;
                  max-width: 100px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  display: inline-block;
                  text-align: center;
                }
              }
              .paydone {
                margin-top: -81px;
                height: 21px;
                width: 100%;
                > span {
                  padding: 2px 4px;
                  background-color: #f2f2f2;
                  color: #999;                 
                }
              }
              .plantime{
                position: relative;
	              display: inline-block;
                height: 29px;
                margin-bottom: 14px;
                width: 100%;
                >span{
                  background-color: rgb(242 242 242);
                  color: #333;                  
                  border-radius: 6px;
                  padding: 4px;                  
                  &:after {
                    content: " ";
                    position: absolute;
                    top: 100%;
                    left: 50%;
                    margin-left: -5px;
                    border-width: 5px;
                    border-style: solid;
                    border-color: rgb(242 242 242) transparent transparent transparent;
                  }
                }
              }
              .hidden-p{visibility: hidden;}
              .proname{
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-bottom: 13px;
              }
              span.round{top: 0}
              &:nth-child(odd),
              &:nth-child(even) {
                .icon {
                  text-align: center;
                  width: 10%;
                  max-width: 140px;
                  position: relative;
                  z-index: 1;
                  .paydone {
                    margin-bottom: 8px;
                  }
                  &:before {
                    content: '';
                    position: absolute;
                    width: 100%;
                    height: 3px;
                    background-color: #c5c5c5;
                    top: 4px;
                  }
                }
                &:before {
                  content: '';
                  position: absolute;
                  width: 3px;
                  height: 128px;
                  background-color: #c5c5c5;
                  top: 4px;
                }
              }
              &:nth-child(odd) {
                .icon {
                  &:before {
                    left: 0;
                  }
                }
                &:before {
                  right: 0;
                }
              }
              &:nth-child(even) {
                flex-direction: row-reverse;
                .icon {
                  &:before {
                    right: 0;
                  }
                }
                &:before {
                  left: 0;
                }
              }
              &:last-child:nth-child(even),
              &:last-child:nth-child(odd) {
                .icon {
                  &:last-child {
                    &:before {
                      width: 50%;
                    }
                  }
                }
                &:before {
                  display: none;
                }
                padding-bottom: 0;
              }
              &:first-child {
                .icon:first-child {
                  &:before {
                    width: 50%;
                    left: 50%;
                  }
                }
              }
              .round {
                vertical-align: inherit;
              }
            }
            &.one-progress {
              .line {
                &:first-child {
                  .icon:first-child {
                    &:before {
                      width: 0;
                    }
                  }
                }
              }
            }
            &.auto-width-progress{
              .line{display: flex;
                .icon{flex: 1}        
              }
            }
          }
          &.section-pay {
            .section-progress {
              .line {
                &:nth-child(odd),
                &:nth-child(even) {
                  .icon {
                    &:before {
                      top: 55px;
                    }
                  }
                  &:before {
                    height: 112px;
                    top: 56px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .tips-box {
    margin-top: 32px;
    .add-btn {
      width: 180px;
      height: 40px;
      line-height: 40px;
      background-color: #4095e4;
      border-radius: 2px;
    }
  }
  /deep/ .ant-input-number {
    width: 100%;
  }
}
</style>
